import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Menu } from './Menu';
import { MenuItem } from './MenuItem';
import { SubMenu } from './SubMenu';

export default {
    title: 'Wavexk/Menu',
    component: Menu,
    argTypes: {
        defaultIndex: {
            type: "string",
            description: 'the active of this Menu',
        },
        mode: {
            type: 'string',
            description: 'the direction of this Menu',
            table: {
                type: {
                    summary: 'string',
                },
                defaultValue: {
                    summary: 'horizontal'
                },
            },
            control: {
                type: 'inline-radio',
                options: ['horizontal', 'vertical']
            },
        },
        defaultOpenSubMenus:{
            type: Array,
            description: 'Default expanded drop-down menu',
            table: {
                type: {
                    summary: "Array",
                },
                defaultValue: {
                    summary: "[]"
                },
            },
        },
        onSelect: {
            description: "select event",
            action: 'clicked'
        }
    }
} as ComponentMeta<typeof Menu>;

export const Horizontal: ComponentStory<typeof Menu> = (args) => (
    <Menu defaultIndex={'0'} onSelect={i => console.log(i)}>
        <MenuItem>
            cool link1
        </MenuItem>
        <MenuItem disabled={true}>
            cool link2
        </MenuItem>
        <SubMenu title="下拉菜单">
            <MenuItem>
                cool link3
            </MenuItem>
            <MenuItem>
                cool link3
            </MenuItem>
            <MenuItem>
                cool link3
            </MenuItem>
        </SubMenu>
        <MenuItem>
            cool link3
        </MenuItem>
    </Menu>
)
Horizontal.parameters = {
    docs: {
        description: {
            story: "this is a default Horizontal Menu"
        }
    }
}

export const Vertical: ComponentStory<typeof Menu> = (args) => (
    <Menu defaultIndex={'0'}  mode="vertical">
        <MenuItem>
            cool link1
        </MenuItem>
        <MenuItem disabled={true}>
            cool link2
        </MenuItem>
        <SubMenu title="下拉菜单">
            <MenuItem>
                cool link3
            </MenuItem>
            <MenuItem>
                cool link3
            </MenuItem>
            <MenuItem>
                cool link3
            </MenuItem>
        </SubMenu>
        <MenuItem>
            cool link3
        </MenuItem>
    </Menu>
)

Vertical.parameters = {
    docs: {
        description: {
            story: "this is a default Vertical Menu"
        }
    }
}

export const DefaultOpenSubs: ComponentStory<typeof Menu> = (args) => (
    <Menu defaultIndex={'0'}  defaultOpenSubMenus= {['2']}>
        <MenuItem>
            cool link1
        </MenuItem>
        <MenuItem disabled={true}>
            cool link2
        </MenuItem>
        <SubMenu title="下拉菜单">
            <MenuItem>
                cool link3
            </MenuItem>
            <MenuItem>
                cool link3
            </MenuItem>
            <MenuItem>
                cool link3
            </MenuItem>
        </SubMenu>
        <MenuItem>
            cool link3
        </MenuItem>
    </Menu>
)

DefaultOpenSubs.parameters = {
    docs: {
        description: {
            story: "this is a defaultOpenSubMenus Horizontal Menu"
        }
    }
}

export const SelectMenu: ComponentStory<typeof Menu> = (args) => (
    <Menu defaultIndex={'0'} onSelect={i => console.log(i)} >
        <MenuItem>
            cool link1
        </MenuItem>
        <MenuItem disabled={true}>
            cool link2
        </MenuItem>
        <SubMenu title="下拉菜单">
            <MenuItem>
                cool link3
            </MenuItem>
            <MenuItem>
                cool link3
            </MenuItem>
            <MenuItem>
                cool link3
            </MenuItem>
        </SubMenu>
        <MenuItem>
            cool link3
        </MenuItem>
    </Menu>
)

SelectMenu.parameters = {
    docs: {
        description: {
            story: "this is a SelectCallback Horizontal Menu"
        }
    }
}